﻿@page "/counter"

@inject IJSRuntime JSRuntime

<TelerikMediaQuery Media="(max-width: 767px)" OnChange="@OnChangeHandler"></TelerikMediaQuery>

<div style="width: @Width; height: @Height" class="chart-container @(isPrinting ? "" : "non-printable-chart")">

    <TelerikButton OnClick="@Print" Icon="print" Class="print-button">Print this chart</TelerikButton>

    <TelerikChart Width="100%" Height="100%" @ref="@ChartRef" Transitions="false">
        <ChartSeriesItems>
            <ChartSeries Type="ChartSeriesType.Bar" Name="Product 1" Data="@series1Data">
            </ChartSeries>
            <ChartSeries Type="ChartSeriesType.Bar" Name="Product 2" Data="@series2Data">
            </ChartSeries>
        </ChartSeriesItems>

        <ChartCategoryAxes>
            <ChartCategoryAxis Categories="@xAxisItems"></ChartCategoryAxis>
        </ChartCategoryAxes>

        <ChartTitle Text="Quarterly revenue per product"></ChartTitle>

        <ChartLegend Position="ChartLegendPosition.Right">
        </ChartLegend>
    </TelerikChart>

</div>

@code {
    string Width { get; set; } = "1400px";
    string Height { get; set; } = "500px";

    bool isPrinting { get; set; }

    public TelerikChart ChartRef { get; set; }

    async Task Print()
    {
        isPrinting = true;
        await InvokeAsync(StateHasChanged);

        ChartRef.Refresh(); //refresh the chart in order to let it take the new dimensions based on the OnChangeHandler below

        await Task.Delay(20); //increase the delay if you would like the Transitions of the chart to be enabled
                              //See the Transitions parameter on the TelerikChart tag for reference (currently disabled)


        // we let the new class render in the browser before telling it to print so it can have effect
        await JSRuntime.InvokeVoidAsync("print");
        isPrinting = false;
    }

    private async Task OnChangeHandler(bool isSmall)
    {
        //sample responsive layout. Often, ths is done with CSS alone, without C#
        if (isSmall)
        {
            Width = "400px";
            Height = "400px";
        }
        else
        {
            Width = "1400px";
            Height = "500px";
        }

        // re-render the chart after the layout has re-rendered too
        await Task.Delay(20);
        ChartRef.Refresh();
    }

    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}
